import React, { Component } from 'react';
import "./UserInfo.css";
import ChildPage from '../common/ChildPage';
import { Icon } from 'antd';
class UserInfo extends Component {
    render() {
        return (
            <ChildPage show={this.props.show} onHide={() => this.props.onHide()}>
                <div className="userInfo-page">
                    <InfoBox name="姓名" value="我是谁" isEdit={true} ></InfoBox>
                    <InfoBox name="性别" value="" isEdit={true}></InfoBox>
                    <InfoBox name="生日" value="" isEdit={true}></InfoBox>
                </div>
            </ChildPage>
        )
    }
}
class InfoBox extends Component {
    getClassName() {
        let classNames = ["info-box"];
        if (this.props.isEdit) {
            classNames.push("edit");
        }
        return classNames.join(" ");
    }
    isShowEdit() {
        if (this.props.isEdit) {
            return (
                    <Icon type="right" />
            )
        }
        return;
    }
    render() {
        return (
            <div className="info-box">
                <div className="name">{this.props.name}</div>
                <div className="value">
                    {this.props.value}
                    {this.isShowEdit()}
                </div>

            </div>
        )
    }
}
export default UserInfo;
